<template>
  <div>
    <div class="header">
      <span style="margin-left: 20px">关键字</span>
      <el-input
        placeholder="请输入关键字"
        v-model="signInReq.keyword"
        style="width: 200px; margin-left: 10px"
        clearable
      ></el-input>
      <span style="margin-left: 10px">签到日期</span>
      <el-date-picker
        v-model="signInReq.signInDates"
        type="daterange"
        align="right"
        unlink-panels
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        value-format="yyyy-MM-dd HH:mm:ss"
        :picker-options="pickerOptions"
        style="margin-left: 10px"
      ></el-date-picker>
      <el-button
        type="primary"
        style="margin-left: 20px"
        size="small"
        @click="
          signInReq.pageIndex = 1
          getCompanySignInLogs()
        "
      >
        搜索
      </el-button>
      <el-button
        plain
        type="primary"
        style="margin-left: 10px"
        size="small"
        @click="outputExcel"
      >
        导出报表
      </el-button>
    </div>
    <el-table
      style="height: 65vh; overflow: auto"
      :data="signInRes.Items"
      stripe
      border
      highlight-current-row
    >
      <el-table-column type="index" width="50"></el-table-column>
      <el-table-column label="签到人">
        <template slot-scope="scope">
          {{ scope.row.USR_Name }}[{{ scope.row.USR_Phone | encodePhone }}]
        </template>
      </el-table-column>
      <el-table-column label="签到时间">
        <template slot-scope="scope">
          {{ scope.row.SI_SignInTime | formatTime }}
        </template>
      </el-table-column>
      <el-table-column label="地址" prop="SI_Address"></el-table-column>
      <el-table-column label="拜访对象" prop="SI_VisitObject"></el-table-column>
      <el-table-column fixed="right" label="操作">
        <template slot-scope="scope">
          <el-button
            type="text"
            size="small"
            icon="el-icon-search"
            @click="showImages(scope.row.SI_ID)"
          >
            签到照片
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <div style="width: 100%; height: 40px">
      <el-pagination
        layout="total,prev,pager,next,sizes"
        style="float: right"
        background
        :current-page.sync="signInReq.pageIndex"
        :total="signInRes.Total"
        :page-size="signInReq.pageSize"
        :page-sizes="[15, 20, 30]"
        @size-change="
          (val) => {
            signInReq.pageSize = val
            getCompanySignInLogs()
          }
        "
        @current-change="getCompanySignInLogs()"
      ></el-pagination>
    </div>

    <el-dialog
      :visible.sync="imageVis"
      width="760px"
      title="签到照片"
      :modal-append-to-body="false"
    >
      <div style="display: flex; flex-wrap: wrap">
        <div v-for="item in images" :key="item.SII_ID">
          <el-image
            style="height: 150px; width: 150px; margin: 10px"
            fit="fill"
            :src="fileURL + item.FL_SrcPath"
            :preview-src-list="[fileURL + item.FL_SrcPath]"
          ></el-image>
        </div>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { getSignInImages, getCompanySignInLogs } from '@/api/common/signIn'
import { baseURL, fileRoot, empIdName, tokenName } from '@/config'
import axios from 'axios'
export default {
  data: function () {
    return {
      pickerOptions: {
        shortcuts: [
          {
            text: '最近一周',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
              picker.$emit('pick', [start, end])
            },
          },
          {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
              picker.$emit('pick', [start, end])
            },
          },
          {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
              picker.$emit('pick', [start, end])
            },
          },
        ],
      },
      signInReq: {
        pageIndex: 1,
        pageSize: 20,
        keyword: null,
        signInDates: [],
      },
      images: [],
      fileURL: baseURL + fileRoot,
      signInRes: {
        Items: [],
        Total: 0,
      },
      imageVis: false,
    }
  },
  methods: {
    getCompanySignInLogs() {
      getCompanySignInLogs(this.signInReq).then(
        ({ data }) => (this.signInRes = data)
      )
    },
    showImages(id) {
      getSignInImages(id).then(({ data }) => {
        this.images = data
        this.imageVis = true
      })
    },
    outputExcel() {
      if (!this.signInReq.keyword && this.signInReq.signInDates.length == 0) {
        this.$message('请选择导出信息（关键字/签到日期）')
        return
      }
      var config = {
        baseURL,
        headers: {},
        responseType: 'blob',
      }
      config.headers[tokenName] = this.$store.getters['user/accessToken']
      config.headers[empIdName] = this.$store.getters['user/curEmp'].EMP_ID
      axios
        .post('/api/Common/SignIn/OutputSignInExcel', this.signInReq, config)
        .then((response) => {
          var blob = new Blob([response.data])
          var downloadElement = document.createElement('a')
          var href = window.URL.createObjectURL(blob) //创建下载的链接
          downloadElement.href = href
          downloadElement.download = '签到报表.xls' //下载后文件名
          document.body.appendChild(downloadElement)
          downloadElement.click() //点击下载
          document.body.removeChild(downloadElement) //下载完成移除元素
          window.URL.revokeObjectURL(href) //释放掉blob对象
        })
        .catch((error) => {
          console.log('response: ', error)
        })
    },
  },
  created: function () {
    var data = this.$store.getters['pagination/getRoutePage'](this.$route)
    Object.assign(this.$data, data)
    this.getCompanySignInLogs()
  },
  beforeRouteLeave(to, from, next) {
    this.$store.dispatch('pagination/setRoutePage', {
      route: this.$route,
      pageData: this.$data,
    })
    next()
  },
}
</script>
<style>
.el-drawer.rtl {
  overflow: scroll;
}
</style>
<style scoped>
.header {
  width: 100%;
  padding-top: 10px;
  padding-bottom: 10px;
  height: auto;
  font-size: 14px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  background: #ffffff;
  border-radius: 5px;
  border-bottom: #f4f8ff 2px solid;
  display: flex;
  margin-bottom: 11px;
  align-items: center;
}
</style>
